<template>
  <div class="status-detail">
    <el-input v-model="searchName" placeholder="请输入学号"></el-input>
    <el-button type="primary" @click="getselectStuid">查询</el-button>
    <el-table :data="tableData" border class="container_wrap">
      <el-table-column prop="studentid" label="学号" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="80" align="center">
      </el-table-column>
      <el-table-column prop="xueyuan" label="学院" width="180">
      </el-table-column>
      <el-table-column prop="classname" label="班级" width="180">
      </el-table-column>
      <el-table-column prop="birthday" label="生日" width="180">
      </el-table-column>
      <el-table-column prop="native_place" width="180" label="家庭住址">
      </el-table-column>
      <el-table-column prop="stu_status" width="80" label="学籍状态">
      </el-table-column>
      <el-table-column prop="change_time" :formatter="dateFormat" width="180" label="学籍变更时间">
      </el-table-column>
    </el-table>

    <div class="pagination">
      <Pagination :pageCount="pagiDataAll" @cpnPageJumpTo="currentChange"></Pagination>
    </div>
  </div>
</template>

<script>
import Search from "@/components/search/Search.vue";
import Pagination from "@/components/pagination";
import {
  selectGraduateByStuid,
  selectallgraduate,
} from "@/api/request";

export default {
  name: "StatusDetail",
  components: {
    Search,
    Pagination,
  },
  created() {
    // 获取第0页学生信息
    this.getStudentMes();
  },
  data() {
    return {
      tableData: [],
      pagiDataAll: 0,
      // 设置flg，stu表示数据来源当前页面，name表示来自子组件searchname
      currentpage: "stu",
      searchName: "",
      // 弹窗
      dialogTableVisible: { value: false },
      dialogRewardVisible: { value: false },
      dialogEditVisible: { value: false },
      // punishData
      punishData: {},
      // 当前行学生信息
      stuBaseInfo: {},
    };
  },

  mounted() {
    // console.log(this.tableData);
  },
  computed: {
    getpagiDataAll() {
      return this.pagiDataAll;
    },
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 3.请求搜索id
    getselectStuid() {
      var stuid = this.searchName;
      var page = 0;
      selectGraduateByStuid(stuid, page).then((res) => {
        this.pagiDataAll = res.data.pageAll;
        // console.log(res);
        let result = res.data.data;

        // 清空数组
        this.tableData.splice(0);
        this.tableData.push(...result);
      });
    },
    /**
     * 数据请求
     */
    // 1.获取学生信息和学籍信息
    getStudentMes(page = 0) {
      // 请求
      selectallgraduate(page).then((res) => {
        this.pagiDataAll = res.data.pageAll;
        // console.log(res);
        let result = res.data.data;

        // 过滤属性值为null的
        // this.resFilter(result);
        // 清空数组
        this.tableData.splice(0);
        this.tableData.push(...result);
      });
    },
    /**
     * 操作
     */
    // 对表格数据的日期进行格式化
    dateFormat(row, column) {
      const daterc = row[column.property];
      const timeFormat = daterc.split('T')[0]
      return timeFormat;
    },
    // 分页跳转，获取学生信息
    currentChange(item) {
      // stu页面
      if (this.currentpage === "stu") {
        this.getStudentMes(item - 1);
      }
      if (this.currentpage === "name") {
        this.getselectStuName(this.searchName, item - 1);
      }
      if (this.currentpage === "studentid") {
        this.getselectStuid(this.searchName, item - 1);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.el-input {
  width: 200px;
  margin-right: 30px;
  margin-top: 20px;
  margin-left: 30px;
}

.pagination {
  text-align: center;
  margin-top: 15px;
}

.name-wrapper {
  .el-tag {
    cursor: pointer;
  }
}
</style>